<template>
    <div id="bigLogo">
        <img src="\public\static\img\logo.png" alt="" id="LogoImg">
        &nbsp;
        <a href="" style="font-size: 1.5em;">巅峰筑梦师</a>
    </div>

    <div id="personageMian" style="margin: 20px; height: 120px; background-color: #FFFFFF; border-radius: 20px;">
        <personageMian></personageMian>
    </div>

    <!-- 这是作用与几个功能 -->
    <div style="height: 60vh;">
        <div 
        style="display: flex; height: calc(60vh/9); 
        align-items: center; justify-content: center; cursor: pointer;" 
        v-for="(item,index) in navList" 
        @click="selectFunctionPath(path)"
        :key="index">
            <div :class="item.color" style="width: 20px; height: 20px;"></div>
            <div>{{ item.name }}</div>
        </div>
    </div>
</template>
<script setup>
import { reactive,ref } from 'vue';
import {loadRouteLocation, routeLocationKey} from "vue-router";
import personageMian from './personageMian.vue';
function selectFunctionPath(path){
  console.log(this.$route);
  location.href = "/login"
}
const navList = ref([
  {
    name: "梦的起源",
    color: "circle color1",
    path: "/origin"
  },
  {
    name: "寻梦之旅",
    color: "circle color2",
    path: "/origin"
  },
  {
    name: "梦魇作祟",
    color: "circle color3",
    path: "/origin"
  },
  {
    name: "庄生梦蝶",
    color: "circle color4",
    path: "/origin"
  },
  {
    name: "魂祈梦请",
    color: "circle color5",
    path: "/origin"
  },
  {
    name: "黄粱美梦",
    color: "circle color6",
    path: "/origin"
  },
  {
    name: "痴人说梦",
    color: "circle color7",
    path: "/origin"
  },
  {
    name: "梦劳魂想",
    color: "circle color8",
    path: "/origin"
  },
  {
    name: "南柯一梦",
    color: "circle color9",
    path: "/origin"
  },
])
</script>
<style scoped>
.circle{
  border-radius: 100%;
}
#bigLogo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:10px ;
    margin-bottom: 10px;
}
#LogoImg{
    width: 60px;
    height: 60px;
}
a{
    text-decoration: none;
}
.color1{
  background-color: #C5D8E8;
}
.color2{
  background-color: #C8C5E8;
}
.color3{
  background-color: #C7F4E0;
}
.color4{
  background-color: #C7F1F4;
}
.color5{
  background-color: #F4C7CD;
}
.color6{
  background-color: #F4E8C7;
}
.color7{
  background-color: #F4C7E4;
}
.color8{
  background-color: #E1C7F4;
}
.color9{
  background-color: #C8B1F4;
}
</style>